<template>
  <div style="padding-right: 10px;">
    <el-row :gutter="20">
      <el-col :span="6" v-for="n in 4" :key="n">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>今日单量</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            99,123
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>1234,123</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin-top: 20px;"></div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="n in 4" :key="n">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>今日单量</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            99,123
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>1234,123</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin-top: 20px;"></div>

    


    <!-- <el-row :gutter="20">
    <el-card shadow="always" style="width: 100%;">
      <el-row :gutter="20">
        <el-col
         v-for="(tag, tagKey) in tagMap"
            :key="tagKey"
            :span="4"
        >
          <el-badge :value="12" :max="99" class="item">
            <el-button size="small">{{tag.label}}</el-button>
          </el-badge>
        </el-col>
      </el-row>
    </el-card>
</el-row> -->


    <div style="margin-top: 20px;"></div>

    <el-card shadow="always" style="width: 100%;">
      <!-- 标题 -->
      <div class="chart-title">
        最近{{ days }}天订单量与销售额（GMV）
      </div>

      <!-- 自定义图例 + 控件 -->
      <div class="custom-legend">
        <span class="legend-item" style="color:#5470C6">⬤ 订单量</span>
        <span class="legend-item" style="color:#91CC75">⬤ 销售额</span>

        <div class="chart-type">
          <label>
            <input type="radio" value="line" v-model="chartType" />
            折线图
          </label>
          <label>
            <input type="radio" value="bar" v-model="chartType" />
            柱状图
          </label>
        </div>

        <div class="date-filter">
          <button :class="{ active: days === 7 }" @click="setDays(7)">最近7天</button>
          <button :class="{ active: days === 15 }" @click="setDays(15)">最近15天</button>
          <button :class="{ active: days === 30 }" @click="setDays(30)">最近30天</button>
        </div>
      </div>

      <!-- ECharts 图表 -->
      <ECharts :options="chartOptions" autoresize style="width: 95%; height: 540px;"></ECharts>
    </el-card>

    <div style="margin-top: 20px;"></div>

    <el-card shadow="always" style="width: 100%;">
    <el-row :gutter="20" style="margin-bottom: 10px; display: flex;" justify="center">
    <el-col
      v-for="([key, tag], index) in Object.entries(tagMap)"
      v-if="index < 5"
      :key="key"

    >
      <!-- 卡片内容 -->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>
  </el-row>

    <!-- 第二行 4个，span=6 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col
        v-for="([key, tag], index) in Object.entries(tagMap)"
        v-if="index >= 5 && index < 9"
        :key="key"
        :span="6"
      >
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行 4个，span=6 -->
    <el-row :gutter="20">
      <el-col
        v-for="([key, tag], index) in Object.entries(tagMap)"
        v-if="index >= 9"
        :key="key"
        :span="6"
      >
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    </el-card>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>七天用户销量</span>
          </div>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <span>{{ props.row.shop }}</span>
                  </el-form-item>
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="店铺 ID">
                    <span>{{ props.row.shopId }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.category }}</span>
                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.desc }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品 ID" prop="id">

            </el-table-column>
            <el-table-column label="商品名称" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.name }}</span>
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>七天用户销量</span>
          </div>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <span>{{ props.row.shop }}</span>
                  </el-form-item>
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="店铺 ID">
                    <span>{{ props.row.shopId }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.category }}</span>
                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.desc }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品 ID" prop="id">

            </el-table-column>
            <el-table-column label="商品名称" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.name }}</span>
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>七天用户销量</span>
          </div>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <span>{{ props.row.shop }}</span>
                  </el-form-item>
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="店铺 ID">
                    <span>{{ props.row.shopId }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.category }}</span>
                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.desc }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品 ID" prop="id">

            </el-table-column>
            <el-table-column label="商品名称" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.name }}</span>
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

    </el-row>


  </div>
</template>

<script>
import ECharts from "vue-echarts";
import * as echarts from "echarts";
export default {
  components: { ECharts },
  data() {
    return {

      items: [
        {
          id: 'A001',
          tags: ['30天以上未售出', '高库龄', '低利润']
        },
        {
          id: 'A002',
          tags: ['退货高', '未上架']
        },
        {
          id: 'A003',
          tags: ['持续上涨', '波段上涨']
        },
        // 可继续添加更多商品
      ],
        
      tagMap: {
        no_sell_30_day: {
          label: '30天以上未售出',
          key: 'no_sell_30_day',
          type: 'danger',
          info: [
            { label: '谷仓sku数量', value: 10, key: 'product_a1' },
            { label: '商品A2', value: 20, key: 'product_a2' },
            { label: '商品A3', value: 30, key: 'product_a3' },
            { label: '商品A4', value: 40, key: 'product_a4' }
          ]
        },
        high_stock_age: {
          label: '高库龄',
          key: 'high_stock_age',
          type: 'danger',
          info: [
            { label: '商品B1', value: 15, key: 'product_b1' },
            { label: '商品B2', value: 25, key: 'product_b2' },
            { label: '商品B3', value: 35, key: 'product_b3' },
            { label: '商品B4', value: 45, key: 'product_b4' }
          ]
        },
        low_profit: {
          label: '低利润',
          key: 'low_profit',
          type: 'warning',
          info: [
            { label: '商品C1', value: 5, key: 'product_c1' },
            { label: '商品C2', value: 8, key: 'product_c2' },
            { label: '商品C3', value: 12, key: 'product_c3' },
            { label: '商品C4', value: 9, key: 'product_c4' }
          ]
        },
        high_return: {
          label: '退货高',
          key: 'high_return',
          type: 'danger',
          info: [
            { label: '商品D1', value: 7, key: 'product_d1' },
            { label: '商品D2', value: 13, key: 'product_d2' },
            { label: '商品D3', value: 9, key: 'product_d3' },
            { label: '商品D4', value: 11, key: 'product_d4' }
          ]
        },
        arrival_notice: {
          label: '到货提醒',
          key: 'arrival_notice',
          type: 'info',
          info: [
            { label: '商品E1', value: 3, key: 'product_e1' },
            { label: '商品E2', value: 4, key: 'product_e2' },
            { label: '商品E3', value: 6, key: 'product_e3' },
            { label: '商品E4', value: 2, key: 'product_e4' }
          ]
        },
        not_listed: {
          label: '未上架',
          key: 'not_listed',
          type: 'info',
          info: [
            { label: '商品F1', value: 0, key: 'product_f1' },
            { label: '商品F2', value: 1, key: 'product_f2' },
            { label: '商品F3', value: 2, key: 'product_f3' },
            { label: '商品F4', value: 3, key: 'product_f4' }
          ]
        },
        low_stock: {
          label: '上架数量少',
          key: 'low_stock',
          type: 'warning',
          info: [
            { label: '商品G1', value: 1, key: 'product_g1' },
            { label: '商品G2', value: 3, key: 'product_g2' },
            { label: '商品G3', value: 2, key: 'product_g3' },
            { label: '商品G4', value: 4, key: 'product_g4' }
          ]
        },
        stock_warning: {
          label: '断货预警',
          key: 'stock_warning',
          type: 'warning',
          info: [
            { label: '商品H1', value: 2, key: 'product_h1' },
            { label: '商品H2', value: 1, key: 'product_h2' },
            { label: '商品H3', value: 0, key: 'product_h3' },
            { label: '商品H4', value: 5, key: 'product_h4' }
          ]
        },
        out_of_stock: {
          label: '已经断货',
          key: 'out_of_stock',
          type: 'danger',
          info: [
            { label: '商品I1', value: 0, key: 'product_i1' },
            { label: '商品I2', value: 0, key: 'product_i2' },
            { label: '商品I3', value: 0, key: 'product_i3' },
            { label: '商品I4', value: 0, key: 'product_i4' }
          ]
        },
        continuous_up: {
          label: '持续上涨',
          key: 'continuous_up',
          type: 'success',
          info: [
            { label: '商品J1', value: 99, key: 'product_j1' },
            { label: '商品J2', value: 101, key: 'product_j2' },
            { label: '商品J3', value: 120, key: 'product_j3' },
            { label: '商品J4', value: 135, key: 'product_j4' }
          ]
        },
        wave_up: {
          label: '波段上涨',
          key: 'wave_up',
          type: 'success',
          info: [
            { label: '商品K1', value: 88, key: 'product_k1' },
            { label: '商品K2', value: 92, key: 'product_k2' },
            { label: '商品K3', value: 95, key: 'product_k3' },
            { label: '商品K4', value: 100, key: 'product_k4' }
          ]
        },
        continuous_down: {
          label: '持续下降',
          key: 'continuous_down',
          type: 'danger',
          info: [
            { label: '商品L1', value: 70, key: 'product_l1' },
            { label: '商品L2', value: 65, key: 'product_l2' },
            { label: '商品L3', value: 60, key: 'product_l3' },
            { label: '商品L4', value: 55, key: 'product_l4' }
          ]
        },
        wave_down: {
          label: '波段下降',
          key: 'wave_down',
          type: 'warning',
          info: [
            { label: '商品M1', value: 60, key: 'product_m1' },
            { label: '商品M2', value: 63, key: 'product_m2' },
            { label: '商品M3', value: 59, key: 'product_m3' },
            { label: '商品M4', value: 61, key: 'product_m4' }
          ]
        }
      },

      tagColorMap: {
        danger: '#f56c6c',
        warning: '#e6a23c',
        info: '#909399',
        success: '#67c23a'
      },
      chartType: "line",
      days: 15,
      chartOptions: {},
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    };
  },
  mounted() {
    this.updateChart();
  },
  watch: {
    chartType() {
      this.updateChart();
    },
    days() {
      this.updateChart();
    },
  },
  methods: {
    getTagType(tag) {
      // 可自定义更多颜色类型
      const tagMap = {
        '30天以上未售出': 'danger',
        '高库龄': 'danger',
        '低利润': 'warning',
        '退货高': 'danger',
        '到货提醒': 'info',
        '未上架': 'info',
        '上架数量少': 'warning',
        '断货预警': 'warning',
        '已经断货': 'danger',
        '持续上涨': 'success',
        '波段上涨': 'success',
        '持续下降': 'danger',
        '波段下降': 'warning'
      }
      return tagMap[tag] || 'info'
    },
    clickFn() {
      this.$message.info("点击了详情");
    },
    setDays(num) {
      this.days = num;
    },
    generateLastNDays(n) {
      const dates = [];
      const today = new Date();
      for (let i = n - 1; i >= 0; i--) {
        const d = new Date(today);
        d.setDate(today.getDate() - i);
        const mm = String(d.getMonth() + 1).padStart(2, "0");
        const dd = String(d.getDate()).padStart(2, "0");
        dates.push(`${d.getFullYear()}-${mm}-${dd}`);
      }
      return dates;
    },
    updateChart() {
      const dates = this.generateLastNDays(this.days);

      // 模拟数据（真实可替换为从后端 API 获取）
      const orderData = dates.map(() => Math.floor(Math.random() * 300 + 100));
      const gvmData = dates.map(() => Math.floor(Math.random() * 5000 + 2000));

      this.chartOptions = {
        title: {
          // 这里不展示，因为标题放到外面了，如果需要内部标题可以打开
          show: false,
          text: `最近${this.days}天订单量与销售额（GMV）`,
          subtext: "单位：订单 / 元",
          top: "20px",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {
          data: ["订单量", "销售额"],
          top: 25, // 下移，避免和外部自定义图例冲突
          left: "center",
          textStyle: {
            fontSize: 14,
          },
        },
        toolbox: {
          show: false,
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: {
          //     show: true,
          //     type: ["line", "bar"],
          //   },
          //   saveAsImage: { show: true },
          // },
        },
        grid: {
          top: "90px", // 留出legend区域空间
          left: "60px",
          right: "60px",
          bottom: "30px",
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: [
          {
            type: "value",
            name: "订单量",
            position: "left",
            axisLine: {
              lineStyle: { color: "#5470C6" },
            },
          },
          {
            type: "value",
            name: "销售额（元）",
            position: "right",
            axisLine: {
              lineStyle: { color: "#91CC75" },
            },
          },
        ],
        series: [
          {
            name: "订单量",
            type: this.chartType,
            yAxisIndex: 0,
            data: orderData,
            smooth: this.chartType === "line", // 平滑曲线
            itemStyle: { color: "#5470C6" },
          },
          {
            name: "销售额",
            type: this.chartType,
            yAxisIndex: 1,
            data: gvmData,
            smooth: this.chartType === "line", // 平滑曲线
            itemStyle: { color: "#91CC75" },
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 12px;
  font-family: Arial, sans-serif;
}

.chart-title {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 4px;
}

.chart-title small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #666;
}

.custom-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0px;
  margin-top: 25px;
  font-family: Arial, sans-serif;
  user-select: none;
}

.legend-item {
  font-weight: 500;
  font-size: 14px;
  user-select: none;
}

.chart-type label,
.date-filter button {
  margin-left: 12px;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 4px;
}

button {
  padding: 6px 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 20px;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button:hover {
  background-color: #f1f2f2;
}

button.active {
  background-color: #4285f4;
  color: white;
  border-color: #4285f4;
}

.demo-table-expand {
  font-size: 0;
  padding: 0px 10px 0px 20px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
